<template>
  <div class="addArticle">
    <el-card>
      <div class="el-card_header">新增文章</div>
      <div class="el-body">
        <el-form
          ref="formData"
          :inline="true"
          :model="formData"
          class="demo-form-inline"
          size="medium"
          :rules="rules"
        >
          <el-form-item label="作者" prop="author">
            <el-input
              v-model="formData.author"
              size="mini"
              placeholder="作者姓名"
            />
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="formData.title"
              size="mini"
              placeholder="文章标题"
            />
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
              v-model="formData.isShow"
              :active-value="1"
              :inactive-value="0"
              @change="swtichCode(formData.isShow)"
            />
          </el-form-item>
          <el-form-item label="摘要">
            <el-input
              v-model="formData.summary"
              class="summary"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8 }"
              placeholder="摘要"
            />
          </el-form-item>
          <br />
          <el-form-item label="封面图片">
            <el-upload
              ref="uploadImg"
              :on-success="handleUploadSucc"
              class="upload-demo"
              :action="baseUrl"
              :headers="headers"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
          <br />
          <el-form-item label="切换文本类型">
            <div class="inline">
              <el-radio v-model="formData.editorType" :label="0"
                >富文本</el-radio
              >
              <el-radio v-model="formData.editorType" :label="1"
                >markDown</el-radio
              >
              <el-alert
                title="切换文本类型会清空内容"
                type="warning"
                show-icon
                :closable="false"
              />
            </div>
          </el-form-item>
        </el-form>
        <TinEditor v-if="formData.editorType == 0" ref="tin" />
        <MarkdownEditor v-else ref="mark" />
        <el-button
          v-if="!id"
          class="sub"
          type="primary"
          @click="submitForm('formData')"
          >立即创建</el-button
        >
        <el-button
          v-else
          class="sub"
          type="primary"
          @click="updataForm('formData')"
          >立即修改</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import TinEditor from '@/components/Tinymce'
import MarkdownEditor from '@/components/MarkdownEditor'
import {
  addArticle,
  updateArticle,
  productArticle
} from '@/api/contents/article'
import mixins from '@/mixins/index.js'
export default {
  components: {
    TinEditor,
    MarkdownEditor
  },
  mixins: [mixins],
  data() {
    return {
      formData: {
        author: '',
        title: '',
        summary: '',
        coverImg: '',
        isShow: 1, // 是否展示
        editorType: 0, // 0富文本  1markdown
        content1: '', // 富文本原文
        content2: '' // 富文本html
      },
      id: null,
      rules: {
        author: [
          { required: true, message: '请输入作者姓名', trigger: 'blur' }
        ],
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.id = this.$route.params.id
    if (this.id) {
      this.init()
    }
  },
  methods: {
    init() {
      productArticle(this.id).then((res) => {
        if (res.success) {
          this.formData = res.data.productArticle
          this.$nextTick(() => {
            if (this.formData.editorType === 0) {
              this.setTin(this.formData.content1)
            } else {
              this.setMd(this.formData.content1)
            }
          })
        } else {
          this.$message.error('获取文章失败!')
        }
      })
    },
    // 切换显示状态
    swtichCode(val) {
      this.formData.isShow = val
    },
    // 立即创建
    submitForm(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          if (this.formData.editorType === 1) {
            this.formData.content1 = this.$refs.tin.getContent()
          } else {
            this.formData.content1 = this.$refs.mark.getValue()
          }
          addArticle(this.formData).then((res) => {
            if (res.success) {
              this.$message.success('创建成功!')
              this.$router.go(-1)
            } else {
              this.$message.error('创建失败!')
            }
          })
        } else {
          this.$message.error('表单填写不完整!')
          return false
        }
      })
    },
    // 图片上传成功回调函数
    handleUploadSucc(res) {
      if (res.success) {
        this.formData.coverImg = res.data.fileUrl
      } else {
        this.$message.error('图片上传失败')
      }
    },
    // 修改文章
    updataForm(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          if (this.formData.editorType === 0) {
            this.formData.content1 = this.$refs.tin.getContent()
          } else {
            this.formData.content1 = this.$refs.mark.getValue()
          }
          updateArticle(this.formData).then((res) => {
            if (res.success) {
              this.$message.success('修改成功!')
              this.$router.go(-1)
            } else {
              this.$message.error('修改失败!')
            }
          })
        } else {
          this.$message.error('表单填写不完整!')
          return false
        }
      })
    },
    getTin() {
      var rs = this.$refs.tin.getContent()
      return rs
    },
    // 设置富文本框内容
    setTin(v) {
      this.$refs.tin.setContent(v)
    },
    // 获取md富文本框内容
    getMd() {
      var html = this.$refs.mark.getHtml()
      var val = this.$refs.mark.getValue()
      return {
        html,
        val
      }
    },
    setMd(val) {
      this.$refs.mark.setValue(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.addArticle {
  .el-card_header {
    font-size: 18rpx;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #bebebe81;
  }
  .demo-form-inline {
    margin: 20px;
    margin-bottom: 0px;
    ::v-deep .el-form-item {
      margin-right: 100px;
      .el-form-item__label {
        width: 100px;
        text-align: right;
      }
      .el-input {
        width: 250px;
      }
      .summary {
        width: 900px;
      }
      .inline {
        display: flex;
        height: 38px;
        align-items: center;
        .el-alert--warning.is-light {
          width: 400px;
          height: 30px;
          font-size: 12px;
        }
      }
    }
  }
  .sub {
    display: block;
    margin: 20px auto;
  }
}
</style>
